import React, { useEffect, useState } from 'react';
import { Route, Switch, withRouter, Redirect } from 'react-router-dom';
import App from './App';
import Login from '@/page/Login';
import { menuConfig } from '@/config/menuConfig';
import _ from 'lodash';
import { TransitionGroup, CSSTransition } from 'react-transition-group';
import intl from '@/config/intlUniversal';

const Routes = ({ history }) => {
  const [isLogin, setIsLogin] = useState(false);

  useEffect(() => {
    const loginSession = JSON.parse(window.sessionStorage.getItem('login'));
    if (loginSession) {
      setIsLogin(true);
    } else {
      window.location.hash.substr(2) !== 'login' && history.push('/login');
    }
  }, [isLogin]);

  const renderRoute = (data) => {
    return _.map(data, (item, key) => {
      if (item.children) {
        return renderRoute(item.children);
      } else {
        const authority = window.sessionStorage.getItem('username');
        if (_.indexOf(item.authority, authority) !== -1) {
          return (
            <Route
              key={item.id}
              path={'/web-b/' + item.path}
              render={() => {
                // eslint-disable-next-line no-useless-concat
                document.title = intl.get(item.name) + ' ' + '| HDK' || '';
                return <item.component />;
              }}
            ></Route>
          );
        }
        return null;
      }
    });
  };

  return (
    <Switch>
      {isLogin ? (
        <>
          <Route
            path="/"
            render={() => {
              return (
                <App setIsLogin={setIsLogin} history={history}>
                  {/* <TransitionGroup>
                    <CSSTransition
                      timeout={1000}
                      classNames={{
                        // 出现的时候class 为 enter的值 enterActive的值
                        enter: 'animate__animated',
                        enterActive: 'animate__backInLeft',
                        // 消失的时候class 为 exit exitActive
                        exit: 'animate__animated',
                        exitActive: 'animate__fadeOutDown',
                      }}
                      key={document.title}
                      unmountOnExit
                    > */}
                  <Switch location={history.location}>
                    <Redirect exact from="/" to="/phoneCS"></Redirect>
                    {renderRoute(menuConfig)}
                    <Route
                      render={() => {
                        return <div>404</div>;
                      }}
                    ></Route>
                  </Switch>
                  {/* </CSSTransition>
                  </TransitionGroup> */}
                </App>
              );
            }}
          ></Route>
        </>
      ) : (
        <Switch>
          <Route
            path="/login"
            render={() => <Login setIsLogin={setIsLogin} />}
          ></Route>
        </Switch>
      )}
    </Switch>
  );
};

export default withRouter(Routes);
